<template>
<div style="height: 100vh">
  <el-container style="height: 100%">
    <el-header>教师管理
      <span class="loginName">用户名:  {{name}}</span>
    </el-header>
    <el-container>
      <el-aside width="200px" >
        <el-menu
            router
            style="height: 100%"
            default-active="1"
            class="el-menu-vertical-demo"
            background-color="#fac05d"
            text-color="#fff"
            active-text-color="green">
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-location"></i>

              <span>教师管理中心</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/Hello/UpdateUserPass/">修改密码</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group>
              <el-menu-item index="/Hello/classFeeRecord/">课时费记录</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>学生管理中心</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/Hello/Students/">所有课时</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group>
              <el-menu-item index="/Hello/FinishStudents">已完成的课时</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group>
              <el-menu-item index="/Hello/WillStudents">未完成课时</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</div>
</template>

<script>
export default {
name: "Hello",
  data() {
    return {
      id:null,
      token:'',
      name:''
    }
  },
  methods: {
    updateUserPass(){
      this.$router.push({path :"/Hello/UpdateUserPass"})
    }
  },
  mounted() {
    this.name = localStorage.getItem("name")
  }
}
</script>

<style scoped>
.el-header, .el-footer {
  background-color: #2d96db;
  color: #b4f60a;
  text-align: center;
  line-height: 60px;
  font-size: 30px;
  padding-right: 20px;
}

.el-aside {
  background-color: #2d96db;
  color: #2d96db;
  text-align: center;
  line-height: 200px;
  height: 100%;
}

.el-main {
  background-color: #ffffff;
  color: #2d96db;
  text-align: center;
  line-height: 30px;
}
.loginName{
  /*margin-right: 0px;*/
  float: right;
  margin-top: 20px;
  font-size: 14px;
  color:red;
}
</style>